<template>
  <div class="container">
      <el-card>
        <!-- 学科 -->
        <div>
          <!-- 左边 -->
      <div>
          <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="18">
        <span class="name">学科名称</span>
        <el-input class="put"  type="text" style="width: 200px" size="small" v-model="input" ></el-input>
            <el-button size="small" @click="input = ''">清除</el-button>
            <el-button size="small" type="primary" @click="search(input)">搜索</el-button>
        </el-col>
      <el-col :span="2">
          <el-row type="flex" justify="end">
            <el-button size="small" class="el-icon-edit" type="success" @click="showDialogVisible = true">新增学科</el-button>
          </el-row>
      </el-col>
      </el-row>
      </div>
      <!-- 右边 -->
      <div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-alert :closable="false" style="margin: 20px 0" class="el-icon-info" type="info">数据一共 {{ page.totals }} 条</el-alert>
            </el-col>
      </el-row>
      </div>
      </div>
      <el-row>
          <el-col :span="24">
              <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="学科名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
        <template v-slot="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isFrontDisplay"
        label="前台是否显示">
      </el-table-column>
      <el-table-column
        prop="twoLevelDirectory"
        label="二级目录">
      </el-table-column>
      <el-table-column
        prop="tags"
        label="标签">
      </el-table-column>
      <el-table-column
        prop="totals"
        label="题目数量">
      </el-table-column>
      <el-table-column
        label="操作"
        width="240px">
        <template v-slot="{ row }">
          <el-button type="text" size="small" @click="$router.push('./directorys')" >学科分类</el-button>
          <el-button type="text" size="small" @click="$router.push('./tags')">学科标签</el-button>
          <el-button type="text" size="small" @click="update(row)">修改</el-button>

          <el-button type="text" size="small" @click="remove(row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
          </el-col>
      </el-row>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
        background
        @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="page.size"
      :total="page.totals"
      layout="prev,pager,next,sizes,jumper"
      >
    </el-pagination>
      </el-row>
      <!-- 修改弹层 -->
               <el-dialog
              title="新增学科"
              :visible="dialogVisible"
              :show-close = true
              @close="dialogVisible = false"
              width="20%">
             <el-row >
               <el-col>
                 <el-form ref="addLogo" :model="formData" :rules="rules" label-width="80px">
               <el-form-item label="学科名称" prop="subjectName" >
               <el-input type="text" v-model="formData.subjectName"></el-input>
               </el-form-item>
               <el-form-item prop="isFrontDisplay" label="是否显示">
                 <el-switch
                   v-model="formData.isFrontDisplay"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   >
                 </el-switch>
               </el-form-item>
             </el-form>
               </el-col>
             </el-row>
              <span slot="footer" class="dialog-footer">
                <el-row type="flex" justify="end">
                  <el-button @click="btnCancel">取 消</el-button>
                  <el-button type="primary" @click="btnOK" >确 定</el-button>
                </el-row>
             </span>
          </el-dialog>
          <!-- 新增弹层 -->
             <el-dialog
              title="新增学科"
              :visible="showDialogVisible"
              :show-close = true
              @close="showDialogVisible = false"
              width="20%">
             <el-row >
               <el-col>
                 <el-form ref="addLogo" :model="formData" :rules="rules" label-width="80px">
               <el-form-item label="学科名称" prop="subjectName" >
               <el-input type="text" v-model="formData.subjectName"></el-input>
               </el-form-item>
               <el-form-item prop="isFrontDisplay" label="是否显示">
                 <el-switch
                   v-model="formData.isFrontDisplay"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
                   >
                 </el-switch>
               </el-form-item>
             </el-form>
               </el-col>
             </el-row>
              <span slot="footer" class="dialog-footer">
                <el-row type="flex" justify="end">
                  <el-button @click="addBtnCancel">取 消</el-button>
                  <el-button type="primary" @click="addBtnOK">确 定</el-button>
                </el-row>
             </span>
          </el-dialog>
  </el-card>
  </div>
</template>

<script>
import { list, add, remove, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      input: '',
      tableData: [],
      dialogVisible: false, // 控制修改弹层
      showDialogVisible: false, // 控制新增弹层
      page: {
        page: 1,
        pagesize: 10,
        totals: 0 // 总数
      },
      loading: false, // 显示遮罩层
      // 新增
      formData: {
        subjectName: '',
        isFrontDisplay: true,
        id: null
      },
      // // 修改
      // amendData: {
      //   subjectName: ''
      // },
      rules: {
        subjectName: [{ required: true, message: '请输入内容', trigger: 'blur' }] // 新增表单校验
      }
    }
  },
  created () {
    this.list()
  },
  methods: {
    handleSizeChange (newPage) {
      this.page.pagesize = newPage
      this.list()
    },
    handleCurrentChange (newPage) {
      this.page.page = newPage
      this.list()
    },
    async list () {
      this.loading = true
      const { data } = await list(this.page)
      this.tableData = data.items
      this.page.totals = data.counts
      console.log(data)
      this.loading = false
    },
    addBtnOK () {
      this.$refs.addLogo.validate().then(async () => {
        await add(this.formData)
        this.list()
        this.showDialogVisible = false
      })
    },
    addBtnCancel () {
      this.$refs.addLogo.resetFields()
      this.showDialogVisible = false
    },
    // 修改数据回显
    async update (id) {
      this.dialogVisible = true
      const { data } = await detail(id)
      console.log(data)
      const isBoolean = data.isFrontDisplay === 1
      this.formData.subjectName = data.subjectName
      this.formData.isFrontDisplay = isBoolean
      this.formData.id = id.id
    },
    async btnOK () {
      try {
        await this.$refs.addLogo.validate()
        await update(this.formData)
        this.list()
        this.dialogVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel () {
      this.formData = {
        subjectName: '',
        isFrontDisplay: true
      }
      this.$refs.addLogo.resetFields()
      this.dialogVisible = false
    },
    async remove (id) {
      try {
        await this.$confirm('确定删除该项吗？')
        await remove(id)
        this.$message.success('删除成功')
        this.list()
      } catch (error) {
        console.log(error)
      }
    },
    async search (val) {
      if (!val) {
        await this.list()
      }
      await this.list()
      this.tableData = this.tableData.filter(item => item.subjectName.includes(val))
    }
  }
}
</script>

<style scoped lang='scss'>
    .container {
        padding: 0 10px;
        margin: 10px 0;
    }
    .name {
        font-weight: 800;
        font-size: 15px;
    }
    .put {
        margin-right: 10px;
        margin-left: 15px;
    }
</style>
